/*
使用方法：
import vSizeOb from '../../directive/sizeObserver';
<div class="box" v-size-ob="handleSize"></div>
const handleSize = () {console.log(111)}
// 或者全局注册
*/


// 监听尺寸变化
// 这儿使用map，因为map的键可以是对象，普通Object的键只能是数组或字符串
// 这儿使用WeakMap，因为WeakMap不影响垃圾回收，将来元素被卸载过后，不会考虑说WeakMap中，还有这个元素，不回收
const map = new WeakMap();

const ob = new ResizeObserver((entries) => {
  for(const entry of entries) {
    const handler = map.get(entry.target);
    handler && handler({
      width: entry.borderBoxSize[0].inlineSize,
      height: entry.borderBoxSize[0].blockSize
    })
  }
})

// 防抖
function debounce(fn, t) {
  const delay = t || 500;
  let timer;
  return function () {
    const args = arguments;
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(context, args);
    }, delay);
  }
}

export default {
  mounted(el, binding) {
    // 添加防抖
    const resize = debounce(binding.value, 50);
    map.set(el, resize);
    ob.observe(el);
  },
  unmounted(el) {
    ob.unobserve(el);
  }
}